<template>
  <div class="heart-container" @click="createHeart">
    <div 
      v-for="(heart, index) in hearts" 
      :key="index"
      class="heart"
      :style="{
        left: heart.x + 'px',
        top: heart.y + 'px',
        backgroundColor: heart.color,
        transform: `scale(${heart.scale}) rotate(${heart.rotation}deg)`
      }"
    ></div>
    <h1>点击屏幕生成爱心 ❤️</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const hearts = ref([]);

const createHeart = (e) => {
  const colors = ['#ff3366', '#ff66b3', '#ff9999', '#ff5050', '#ff0066'];
  
  hearts.value.push({
    x: e.clientX - 15, // 居中定位
    y: e.clientY - 15,
    color: colors[Math.floor(Math.random() * colors.length)],
    scale: Math.random() * 0.5 + 0.5, // 随机大小 (0.5 ~ 1)
    rotation: Math.random() * 30 - 15 // 随机旋转 (-15° ~ 15°)
  });

  // 自动移除旧爱心（避免内存泄漏）
  if (hearts.value.length > 30) {
    hearts.value.shift();
  }
};
</script>

<style scoped>
.heart-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(to bottom, #fce4ec, #f8bbd0);
}

.heart {
  position: absolute;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  animation: float 4s ease-in-out forwards;
}

.heart::before, .heart::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: inherit;
}

.heart::before {
  top: -15px;
  left: 0;
}

.heart::after {
  top: 0;
  left: -15px;
}

@keyframes float {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-300px) rotate(45deg);
  }
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #d81b60;
  font-family: 'Arial', sans-serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  user-select: none;
}
</style>